<template>
  <div>
    <!-- Drawer抽屉 -->
    <!-- <Drawer :title="title" v-model="visible" width="500" draggable :mask-closable="type=='0'"> -->
       <Modal v-model="visible" width="500" :title="title" >
      <div :style="{maxHeight: maxHeight}" class="drawer-content">
        <Form ref="form" :model="form" :rules="formValidate"  label-position="top">
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="名称" prop="name" >
                <Input v-model="form.name" clearable/>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="备注" prop="title" >
                <Input v-model="form.title" clearable type="textarea"/>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="footer" v-show="type!='0'" slot="footer">
        <Button @click="visible = false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
      </div>
      </Modal>
    <!-- </Drawer> -->
  </div>
</template>

<script>
  // 根据你的实际请求api.js位置路径修改
  import { addMedEquipmentName, editMedEquipmentName } from "@/api/index";
  export default {
    name: "addEdit",
    components: {
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      data: {
        type: Object
      },
      type: {
        type: String,
        default: "0"
      }
    },
    data() {
      return {
        visible: this.value,
        title: "",
        submitLoading: false,
        maxHeight: 510,
        form: { // 添加或编辑表单对象初始化数据
          name: "",
          title: "",
        },
        // 表单验证规则
        formValidate: {
        }
      };
    },
    methods: {
      init() {
      },
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.type == "1") {
              // 编辑
              this.submitLoading = true;
              editMedEquipmentName(this.form).then(res => {
                this.submitLoading = false;
                if (res.success) {
                  this.$Message.success("操作成功");
                  this.$emit("on-submit", true);
                  this.visible = false;
                }
              });
            } else {
              // 添加
              this.submitLoading = true;
              addMedEquipmentName(this.form).then(res => {
                this.submitLoading = false;
                if (res.success) {
                  this.$Message.success("操作成功");
                  this.$emit("on-submit", true);
                  this.visible = false;
                }
              });
            }
          }
        });
      },
      setCurrentValue(value) {
        if (value === this.visible) {
          return;
        }
        if (this.type == "1") {
          this.title = "编辑";
          this.maxHeight =
                  Number(document.documentElement.clientHeight - 121) + "px";
        } else if (this.type == "2") {
          this.title = "添加";
          this.maxHeight =
                  Number(document.documentElement.clientHeight - 121) + "px";
        } else {
          this.title = "详细信息";
          this.maxHeight = "100%";
        }
        // 清空数据
        this.$refs.form.resetFields();
        if (this.type == "0" || this.type == "1") {
          // 回显数据处理
          this.form = this.data;
        } else {
          // 添加
          delete this.form.id;
        }
        this.visible = value;
      }
    },
    watch: {
      value(val) {
        this.setCurrentValue(val);
      },
      visible(value) {
        this.$emit("input", value);
      }
    },
    mounted() {
      this.init();
    }
  };
</script>

<style lang="less">
  // 建议引入通用样式 具体路径自行修改 可删除下面样式代码
  // @import "@/styles/drawer-common.less";
  .drawer-footer {
    z-index: 10;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    background: #fff;
  }

  .drawer-content {
    overflow: auto;
  }

  .drawer-content::-webkit-scrollbar {
    display: none;
  }

  .drawer-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
  }

  .drawer-title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 16px;
  }
</style>